Suggested: 3D Photo Effect from 1 Image JavaScript Tutorial
If playback doesn't begin shortly, try restarting your device.
4:03
0:00
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
// For someone you start this tutorial after Jan 15, 2021 ; you may follow this update on the lines of codes.// I have put 3 lines of codes form the bottom to line 22-24 as to define the "renderer.domElement"// I have updated line 27 and added "renderer.domElement", as it's required based on the the document.// This is the first time for a marketer to try new fancy techs, pls let me know if this can help. Thanks all :D !<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script src="three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
Thank you sir.One more question, how to do dynamic 3d model? I mean, input on website few parameters and output 3d model,something like online product configuratoris it possible?
Great stuff, is there a way to add customization option to the model? i.e, have colors change and stuff while the model is being panned/rotated around?
Hi, thank you! Great tutorial. I have a question, any of you guys know how to add text on a 3d model in threejs? I would really appreciate if someone helps me with that.